#@ucenter_noleft_layout('购物车')

#define css()
<style>
    .form-header {
        margin: 4px 0;
        border:none;
        padding:0 0 4px 0;
        font-size:16px;
    }

    .input-number {
        width: 120px;
    }

    .input-group-addon {
        cursor: pointer;
    }

    .add, .subtract {

    }


    .bottom-bar {
        left: 0;
        position: fixed;
        bottom: 0;
        width: 100%;

        height: 60px;
        background-color: #fff;
        border-top: 1px solid #ebedef;
        card-shadow: 0 -1px 8px rgba(0, 1, 1, .08);
        z-index: 9999;
    }

    .bottom-content {

        width: 100%;
        max-width: 1250px;
        height: 60px;
        margin: 0 auto;
        padding-left: 40px;
        padding-right: 40px;
        card-sizing: border-card;
        z-index: 9999;
    }

    .bottom-content div {
        height: 60px;
        line-height: 60px;
    }

    .bottom-content-action {
        display: flex;
    }

    .jp-operation a, .cart-checkbox label {
        font-size: 14px;
        color: #999;
        margin-right: 5px;
        font-weight: 400;
    }

    .jp-operation a:hover {
        color: #dd4b39;
    }

    .jp-operation .jp-cleaner {
        font-weight: 500;
        color: #666;
    }

    .bottom-content-price {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .bottom-content-price div{
        margin-right:10px;
    }
    .select-sum, .price-sum {
        color: #999;
        font-size: 14px;
        margin-right: 5px;
        font-weight: 400;
    }

    .select-sum em {
        color: #dd4b39;
        font-weight: 500;
        margin: 0 5px;
    }

    .sumprice em {
        color: #dd4b39;
        font-weight: 500;
        font-size: 18px;
    }

    .table > tbody > tr > td {
        vertical-align: middle;
    }

    @media all and (max-width: 768px) {
        .bottom-content {
            padding-left: 0;
        }
    }


</style>
#end

#define script()

<script>

    $(".add").on("click", function () {
        var itemId = $(this).attr("data-value");
        var that = $(this);

        ajaxPost('#(CAPTH)/ucenter/cart/addcount', {id: itemId}, function (ret) {
            var input = that.prev();
            var inputVal = input.val();
            if (inputVal && inputVal != "") {
                inputVal = parseInt(inputVal) + 1;
            } else {
                inputVal = 1;
            }
            input.val(inputVal);
            doCompute(inputVal, that, ret.shouldPayPrice);
        });
    });


    $(".subtract").on("click", function () {
        var itemId = $(this).attr("data-value");
        var that = $(this);
        ajaxPost('#(CAPTH)/ucenter/cart/subtractcount', {id: itemId}, function (ret) {
            var input = that.next();
            var inputVal = input.val();
            if (inputVal && inputVal != "") {
                inputVal = parseInt(inputVal) - 1;
                if (inputVal < 1) inputVal = 1;
            } else {
                inputVal = 1;
            }
            input.val(inputVal);
            doCompute(inputVal, that, ret.shouldPayPrice);
        });
    });


    function doCompute(val, btn, shouldPayPrice) {

        var row = btn.parent().parent().parent("tr").prevAll().length + 1;
        var col = btn.parent().parent().prevAll().length;

        // var price = parseFloat(getTableContent(row, col - 1));
        // var totalPrice = price * val;

        setTableContent(row, col + 1, shouldPayPrice);

        querySelectedItemCountAndPrice();
    }


    function getTableContent(row, col) {
        var content = null;
        $('#tab tr').each(function (i) {
            $(this).children('td').each(function (j) {
                if (row == i && col == j) {
                    content = $(this).text();
                    return false;
                }
            });
        });
        return content;
    }


    function setTableContent(row, col, content) {
        $('#tab tr').each(function (i) {
            $(this).children('td').each(function (j) {
                if (row == i && col == j) {
                    content = $(this).text(content);
                    return false;
                }
            });
        });
    }


    function checkAll(checkbox) {
        if (checkbox.checked) {
            $('[name="tableItem"]').each(function () {
                $(this).prop('checked', checkbox.checked);
            });
        }

        var itemIds = getSelectedIds();
        if (itemIds == "") {
            alert("当前购物车并没有任何内容。");
            if (checkbox.checked) {
                $(checkbox).prop('checked', false);
            }
            return;
        }


        if (checkbox.checked) {
            ajaxPost('#(CAPTH)/ucenter/cart/select', {id: itemIds}, function () {
                $('[name="tableItem"]').each(function () {
                    $(this).parent().parent("tr").prop("style", "background-color: #fff4e8;");
                    querySelectedItemCountAndPrice();
                });
            })
        } else {
            ajaxPost('#(CAPTH)/ucenter/cart/unselect', {id: itemIds}, function () {
                $('[name="tableItem"]').each(function () {
                    $(this).prop('checked', false);
                    $(this).parent().parent("tr").prop("style", "");
                    querySelectedItemCountAndPrice();
                });
            })
        }
    }

    function dataItemChange(checkbox) {
        var itemId = $(checkbox).val();
        if (checkbox.checked) {
            ajaxPost('#(CAPTH)/ucenter/cart/select', {id: itemId}, function () {
                $(checkbox).parent().parent("tr").prop("style", "background-color: #fff4e8;");
                querySelectedItemCountAndPrice();
            })
        } else {
            ajaxPost('#(CAPTH)/ucenter/cart/unselect', {id: itemId}, function () {
                $(checkbox).parent().parent("tr").prop("style", "");
                querySelectedItemCountAndPrice();
            })
        }

    }

    function getSelectedIds() {
        var selectedIds = "";
        $('[name="tableItem"]').each(function () {
            if ($(this).prop('checked')) {
                selectedIds += $(this).val() + ",";
            }
        });
        return selectedIds == "" ? "" : selectedIds.substring(0, selectedIds.length - 1);
    }


    function doDelCart(id) {
        if (confirm("确定要删除该商品吗？")) {
            ajaxGet('#(CAPTH)/ucenter/cart/doDel?id=' + id, function () {
                location.reload()
            })
        }
    }

    function querySelectedItemCountAndPrice() {
        ajaxGet("#(CAPTH)/ucenter/cart/querySelectedItemCountAndPrice", function (data) {
            $('#selectedItemCount').text(data.count);
            $('#selectedItemPrice').text("¥" + data.price);
        })
    }


    function doDelSelectedItems() {
        ajaxGet("#(CAPTH)/ucenter/cart/querySelectedItemCountAndPrice", function (data) {
            if (data.count > 0) {
                if (confirm("确定要删除所有选中的商品吗？")) {
                    ajaxGet("#(CAPTH)/ucenter/cart/doDelSelectedItems", function () {
                        location.reload();
                    })
                }
            } else {
                alert("您未选择任何商品。")
            }
        })
    }


    function doRemoveSelectedItemsToFavorites() {
        ajaxGet("#(CAPTH)/ucenter/cart/querySelectedItemCountAndPrice", function (data) {
            if (data.count > 0) {
                if (confirm("确定要把所有选中商品移动到收藏夹吗？")) {
                    ajaxGet("#(CAPTH)/ucenter/cart/doRemoveSelectedItemsToFavorites", function () {
                        location.reload();
                    })
                }
            } else {
                alert("您未选择任何商品，无法进行移动到收藏夹。")
            }
        })
    }


    function gotoCheckout() {
        ajaxGet("#(CAPTH)/ucenter/cart/querySelectedItemCountAndPrice", function (data) {
            if (data.count > 0) {
                location.href = "#(CPATH)/ucenter/checkout"
            } else {
                alert("您未选择任何商品，无法进行结算。")
            }
        })
    }

</script>
#end

#define content()
<!-- Main content -->

<div class="container-fluid">
    <h3 class="form-header" style="color:#666;">
        <i class="fa fa-cart-plus" aria-hidden="true"></i> 购物车
    </h3>
</div>

<section class="invoice" style="border-color:#e4e6e6;">


    <!-- Table row -->
    <div class="col-12 table-responsive">
        <table class="table " id="tab" style="font-size:14px;">
            <thead>
            <tr style="font-size:14px;">
                <th style="width: 10px">
                    <input class="tableCheckAll" id="checkall" type="checkbox"/>
                </th>
                <th style="width: 40%">商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
                <th style="width: 100px">操作</th>
            </tr>
            </thead>
            <tbody>

            #for(userCart : page.list ??)
            <tr #(userCart.selected ? 'style="background-color: #fff4e8;"' : '') >
            <td>
                <input name="tableItem" #checkedIf(userCart.selected) type="checkbox" value="#(userCart.id ??)"
                       onchange="dataItemChange(this)"/>
            </td>
            <td>
                <a href="#(userCart.product_link ?? '#')" target="_blank">
                    #(userCart.product_title ??)
                </a>

                <div style="color: #9c9c9c">
                    #for(option : userCart.optionsMap)
                    #(option.key ??) : #(option.value ??) #if(!(for.last))<br/>#end
                    #end
                </div>
            </td>
            <td>
                #if(userCart.memberPrice ??)
                <s>#(userCart.product_price ??)</s>
                会员：#(userCart.memberPrice)
                #else
                #(userCart.product_price ??)
                #end
            </td>
            <td>
                <div class="input-group input-number" style="align-items: center">
                    <span class="input-group-addon subtract" data-value="#(userCart.id ??)">-</span>
                    <input type="text" class="form-control" style="margin:0 10px;" value="#(userCart.product_count ??)">
                    <span class="input-group-addon add" data-value="#(userCart.id ??)">+</span>
                </div>
            </td>
            <td>#(userCart.shouldPayPrice ??)</td>
            <td>
                <a href="#(CPATH)/ucenter/checkout/#(userCart.id ??)">结算</a>
                <a href="javascript:;" onclick="doDelCart('#(userCart.id)')">删除</a>
            </td>
            </tr>
            #end

            </tbody>
        </table>

        <div class="card-footer">
            <div class="row">
                <div class="col-sm-12">
                    #@_paginate()
                </div>
            </div>
        </div>

    </div>
    <!-- /.col -->
    <!-- /.row -->
</section>

<div class="clearfix"></div>

<div class="bottom-bar">
    <div class="row bottom-content">
        <div class="col-lg-4 bottom-content-action hidden-xs">

            <div class="select-all">
                <div class="cart-checkbox">
                    <input type="checkbox" class="jpcheckbox" onchange="checkAll(this)">
                    <label>全选</label>
                </div>
            </div>
            <div class="jp-operation">
                <a href="javascript:;" onclick="doDelSelectedItems()" class="remove-batch">删除选中商品</a>
                <a href="javascript:;" onclick="doRemoveSelectedItemsToFavorites()" class="follow-batch">移到收藏</a>
            </div>


        </div>
        <div class="col-lg-8 col-12 bottom-content-price">

            <div class="select-sum">
                已选择<em id="selectedItemCount">#(selectItemCount ?? '0')</em>件商品<b class="up"></b>
            </div>

            <div class="price-sum">
                <div>
                    <span class="txt txt-new">总价：</span>
                    <span class="sumprice">
                        <em id="selectedItemPrice">¥#number(selectItemTotalPrice ?? 0,'0.00')</em>
                    </span>
                    <b class="ml5 price-tips"></b>

                </div>
            </div>

            <div class="bottom-content-buybtn">
                <a href="javascript:;" class="btn-danger " onclick="gotoCheckout()">
                    结算
                </a>
            </div>


        </div>
<!--        <div class="col-lg-2 col-xs-3 bottom-content-buybtn">-->
<!--            -->
<!--        </div>-->
    </div>
</div>
#end
